<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>

  <div id="app">
    <button @click="age++">{{age}}</button>
    <button @click="info.desc.a++">a++</button>

    <aki :total="total"></aki>
    <button @click="total+=10">增加{{total}}</button>
  </div>

  <script>
    const { createApp, ref, reactive, watch, watchEffect } = Vue;
    const app = createApp({
      setup() {

        const age = ref(0);
        const total = ref(5);
        const info = reactive({
          desc: {
            a: 0,
            b: 1,
          }
        })

        watch(age, (newAge) => {
          console.log('age触发了', newAge);
        }, {
          immediate: true,
        })

        watch(info, (newInfo) => {
          console.log('info触发了', newInfo);
        }, {
          deep: true,
        })

        app.component('aki', {

          props: {
            total: Number,
          },

          template: `
    
    <button>{{total}}票</button>
    `,

          setup(props) {
            watch(total, (newTotal) => {
              console.log('最新的total', newTotal);
            })
          }

        })

        watchEffect(()=>{
          console.log('67行', age.value);
          console.log('68行', total.value);
          
        })

        return {
          age,
          info,
          total
        }
      }
    });


    app.mount('#app');

  </script>

</body>

</html>